<template>
  <div class="seven_content myStyle">
    <div class="content_box">
      <div class="echartsBox">
        <StrokeTitle4 title=" " class="title_box_bc" style="width: 100%; height: 6%">
          <div class="flex_center" slot="select">
            <span style="margin-left: -20px; font-size: 14px">基地选择</span>
            <ElementSelect ref="psNameSelect" :isSelected="true" @select="selectListAll" url="/basic/factory/selectList"
              :settings="{
                placeholder: '请选择',
                isSelected: true,
                isMultiple: false,
                label: 'name',
                value: 'deptId',
              }" style="position: relative; left: 10px" response="data" size="" />
            <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px"
              style="background: none !important; margin-left: 10px">
              <el-form-item label="物资类型">
                <treeselect v-model="queryParams.typeId" :options="configOptions" placeholder="请选择类型"
                  :normalizer="normalizer" :searchable="false" :appendToBody="true" />
              </el-form-item>
              <el-form-item label="所属仓库">
                <el-select v-model="queryParams.depotId" placeholder="请选择仓库" clearable @change="changeDeptoId">
                  <el-option v-for="depot in depotOptions" :key="depot.id" :label="depot.name"
                    :value="depot.id"></el-option>
                </el-select>
              </el-form-item>
            </el-form>
            <StrokeItem3 title="种类" leftWidth="30%" rightWidth="70%" :number="infoData.typeNum || 0" unit="种"
              style="margin-bottom: 0;  margin-left: -20px" class="StrokeItem3"/>
            <StrokeItem3 title="库存数量" leftWidth="30%" rightWidth="70%" :number="infoData.stockNum || 0"
              style="margin-bottom: 0;  margin-left: 10px" class="StrokeItem3"/>
            <StrokeItem3 title="总额" leftWidth="30%" rightWidth="70%" :number="infoData.stockMoney || 0" unit="元"
              style="margin-bottom: 0;  margin-left: 10px" class="StrokeItem3a"/>
            <!-- <ElementSelect
              ref="psNameSelect"
              :isSelected="true"
              @select="selectListAll"
              url="/basic/factory/selectList"
              :settings="{
                placeholder: '请选择',
                isSelected: true,
                isMultiple: false,
                label: 'name',
                value: 'deptId',
              }"
              response="data"
              style="right: 10px; position: absolute"
              size=""
            /> -->
          </div>
        </StrokeTitle4>

        <!-- 实际计划完成度 -->
        <StrokeTitle2 title="生产计划统计（标准箱/桶）" class="title_box_bc" style="width: 100%; height: 27.5%">
          <div class="flex_center" slot="select">
            <!-- <ElementRadio v-model="model" :isButton="true" @change="radioChange2" /> -->
            <ElementRadio v-model="model" :isButton="true" @change="radioChange2" :isCustomize="true" />
          </div>
          <MoreDirection2 slot="content" gridLeft="2%" :ySplitLineShow="false" :yAxisLineShow="true"
            :xAxisLineShow="true" :legendData="['实际生产', '未生产']" :isLegend="false" :data="data2" unit="%"
            gridRight="2%" />
        </StrokeTitle2>

        <!-- 主要产成品产量 -->
        <StrokeTitle2 title="主要产成品产量（标准箱/桶）" class="title_box_bc" style="width: 45.5%; height: 29.5%">
          <div class="flex_center" slot="select">
            <!-- <ElementRadio v-model="model" :isButton="true" @change="radioChange4" /> -->

            <div class="all_box" style="margin-left: -0px" @click="planCount4All">
              全部
            </div>
          </div>

          <XRow barWidth="6" :data="data4" xUnit="" barRight="12%" barLeft="5%" slot="content" tooltipLabel=" 标准箱" />
        </StrokeTitle2>
        <!-- 实际计划分类完成度 -->
        <StrokeTitle2 title="各基地十二月份产量（标准箱/桶）" class="float title_box_bc" style="width: 53.5%; height: 29.5%">
          <div class="flex_center" slot="select">
            <!-- <ElementRadio v-model="model" :isButton="true" @change="radioChange3" :isCustomize="true" /> -->
          </div>
          <div class="Echarts" style="height: 100%" slot="content">
            <ELine :data="data3" :axisLabelShow="false" />
            <!-- <div class="calculagraph_left" style=" width: 25%;margin-left:15%">
              <Ring class='ring' :data="{allRate:data3.allCount}" :subtext="''" />
              <div class="label" style="margin-top:1px">总产能</div>
            </div>
            <div class="calculagraph_right" style=" width: 60%;">
              <XRow barWidth="6" :data="data3.dataList" xUnit="标准箱" barRight="19%" barLeft="10%" />
            </div> -->
          </div>
        </StrokeTitle2>
        <!-- 实际计划分类完成度 -->
        <StrokeTitle2 title="实际计划完成度" class="float title_box_bc" style="width: 26%; height: 29.5%">
          <div class="flex_center" slot="select">
            <el-select v-model="data1Form.countType" placeholder="请选择" style="width: 102px; margin-right: 2px"
              size="mini" @change="planCount1" class="noBackground">
              <el-option v-for="item in [
                { value: '', label: '环比' },
                { value: '1', label: '同比' },
              ]" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
            <!-- <ElementRadio v-model="model" :isButton="true" @change="radioChange1" :isCustomize="true" /> -->
            <!-- <ElementSelect ref="psNameSelect" :isSelected="true" @select="selectList1" url="/basic/factory/selectList" :settings="{ placeholder: '请选择',
          isSelected: true,
          isMultiple: false,
          label: 'name',
          value: 'deptId'}" response="data" /> -->
          </div>
          <div class="Echarts" style="height: 100%" slot="content">
            <div class="calculagraph_left">
              <Ring class='ring' :data="{ allRate: data1.finishCount }" :subtext="data1.allRate"
                titleTop="36%" />
              <div class="label" style="margin-top: 1px">已完成数量/占比</div>
            </div>
            <div class="calculagraph_right">
              <StrokeItem title="总计划量" :number="data1.allCount" class="StrokeItem" />
              <StrokeItem title="上期" :number="data1.lastAllCount" class="StrokeItem" />
              <StrokeItem :title="data1Form.countType==1?'同比':'环比'" :number="data1.momRate" unit="%" class="StrokeItem" />
              <div class="label" style="margin-top: 1px">单位：标准箱/桶</div>
            </div>
          </div>
        </StrokeTitle2>
        <!-- 近三十日产能趋势 -->
        <StrokeTitle2 title="近三十日产能趋势（标准箱/桶）" class="title_box_bc" style="width: 72.9%; height: 29.5%">
          <div class="flex_center" slot="select"></div>
          <div class="Echarts flex_center" slot="content" style="height: 100%">
            <MoreDirection :data="data5" yUnit="标准箱；" :legendData="['产量']" barWidth="18"
              style="height: calc(100% - 0px)" :yAxisLineShow="false" :xAxisLineShow="true" :isCategory="false"
              :isUnit="false" gridRight="1%" tooltipLabel=" " :isMoretooltip="true" gridLeft="1%"
              :axisLabelShow="false" />
          </div>
        </StrokeTitle2>
      </div>
    </div>
    <AllDialog ref="AllDialog" />
  </div>
</template>

<script>
  import StrokeTitle2 from "@/components/myComponents/stroke/title2.vue";
  import StrokeTitle4 from "@/components/myComponents/stroke/title4.vue";
  import StrokeItem3 from "@/components/myComponents/stroke/item3.vue";
  import StrokeItem6 from "@/components/myComponents/stroke/item6.vue";
  import {
    PlanCount1,
    PlanCount2,
    PlanCount3,
    PlanCount4,
    PlanCount5,
    PlanCount6,
    productStock,
  } from "@/api/produce/index.js";
  import { treeselect } from "@/api/equipment/materials/productConfig";
  import { listDepot, getDepot } from "@/api/equipment/materials/depot";
  import Treeselect from "@riophae/vue-treeselect";
  import "@riophae/vue-treeselect/dist/vue-treeselect.css";
  export default {
    components: {
      StrokeTitle2,
      StrokeTitle4,
      Treeselect,
      StrokeItem3, StrokeItem6
    },
    name: "ProduceEchartsAll",
    data() {
      return {
        //实际计划分类完成度
        data1: {
          allCount: "0",
          allRate: 0,
          lastAllCount: 0,
          momRate: "0.00%",
          finishCount: "0",
        },
        data1Form: {
          pDateStart: this.$getMonth("s", 0),
          pDateEnd: this.$getMonth("e", 0),
          timeType: "1",
          deptId: "",
          countType: "",
        },
        data2: [],
        data2Form: {
          pDateStart: this.$getMonth("s", 0),
          pDateEnd: this.$getMonth("e", 0),

        },
        model: "month",
        //实际计划分类完成度
        data3: [],
        //实际计划分类完成度表单
        data3Form: {
          pDateStart: this.$getMonth("s", 0),
          pDateEnd: this.$getMonth("e", 0),
          timeType: "1",
          deptId: "",
          all: "",
        },
        //主要产成品产量
        data4: [],
        //主要产成品产量表单
        data4Form: {
          pDateStart: this.$getMonth("s", 0),
          pDateEnd: this.$getMonth("e", 0),
          deptId: "",
          all: "",
        },

        //近三十日产能趋势
        data5: [],
        //近三十日产能趋势表单
        data5Form: {
          deptId: "",
        },
        //物资类型
        configOptions: [],
        // 所属仓库
        depotOptions: [],
        // 查询参数
        queryParams: {
          depotId: null,
          typeId: null,
        },
        //统计信息
        infoData: {
          stockMoney: 0,
          stockNum: 0,
          typeNum: 0,
        },
      };
    },
    watch: {
      // 监听typeId
      "queryParams.typeId": "productStock",
    },
    activated() {
      //实际计划分类完成度
      this.planCount1();
      //实际计划完成度
      this.planCount2();
      //实际计划分类完成度
      this.planCount3();
      //主要产成品产量
      this.planCount4();
      //近三十日产能趋势
      this.planCount5();
      //获取物资类型
      this.getTreeselect();
      //获取仓库列表
      this.getDepot();
      //获取统计信息数据
      this.productStock();
    },
    methods: {
      /** 查询部门下拉树结构 */
      getTreeselect() {
        treeselect().then((response) => {
          this.configOptions = response.data;
        });
      },
      normalizer(node) {
        if (node.children && !node.children.length) {
          delete node.children;
        }
        return {
          id: node.id,
          label: node.typeName,
          children: node.children,
        };
      },
      //获取仓库列表
      getDepot() {
        listDepot({ type: "01", parentId: null, id: null }).then((response) => {
          this.depotOptions = response.data;
        });
      },

      //所属仓库修改
      changeDeptoId(e) {
        if (e == "") {
          this.queryParams.depotId = null;
        } else {
          this.queryParams.depotId = e;
        }

        this.productStock();
      },
      //切换右上角基地
      selectListAll(e) {
        if (e != undefined) {
          this.data1Form.deptId = e;
          this.data2Form.deptId = e;
          this.data4Form.deptId = e;
          this.data3Form.deptId = e;
          this.data5Form.deptId = e;
        } else {
          this.data1Form.deptId = "";
          this.data2Form.deptId = "";
          this.data4Form.deptId = "";
          this.data5Form.deptId = "";
          this.data3Form.deptId = "";
        }
        this.planCount1();
        this.planCount2();
        this.planCount4();
        this.planCount3();
        this.planCount5();
      },
      //获取统计信息数据
      productStock() {
        productStock(this.queryParams).then((response) => {
          // console.log(response);
          if (response.code == 200) {
            this.infoData = response.data;
            this.infoData.typeNum = this.infoData.typeNum.toFixed(0);
            this.infoData.stockNum = this.infoData.stockNum.toFixed(0);
            this.infoData.stockMoney = this.infoData.stockMoney.toFixed(2);
          }
        });
      },
      //实际计划分类完成度切换
      radioChange(e) { },
      //实际计划分类完成度
      planCount1() {
        PlanCount1(this.data1Form).then((res) => {
          this.data1 = res.data;
          // console.log(res.data)
        });
      },
      //实际计划分类完成度时间切换
      radioChange1(event) {
        this.data1Form.pDateStart = event[0];
        this.data1Form.pDateEnd = event[1];
        this.data1Form.timeType = event[2];
        this.planCount1();
      },
      //实际计划分类完成度选择器切换
      selectList1(e) {
        if (e != undefined) {
          this.data1Form.deptId = e;
        } else {
          this.data1Form.deptId = "";
        }
        this.planCount1();
      },

      //实际计划完成度
      planCount2() {
        PlanCount2(this.data2Form).then((res) => {
          this.data2 = [];
          for (let item of res.data) {
            let obj = {};
            obj.name = item.name;
            obj.value1 = item.value1;
            obj.value2 = item.value2;
            obj.value3 = item.value3;
            obj.value4 = item.value4;
            this.data2.push(obj);
          }
        });
      },
      //实际计划完成度时间切换
      radioChange2(event) {
        this.data2Form.pDateStart = event[0];
        this.data2Form.pDateEnd = event[1];
        this.planCount2();
        this.data1Form.pDateStart = event[0];
        this.data1Form.pDateEnd = event[1];
        this.data1Form.timeType = event[2];
        this.planCount1();
        this.data4Form.pDateStart = event[0];
        this.data4Form.pDateEnd = event[1];
        this.planCount4();
      },
      //实际计划分类完成度选择器切换
      selectList3(e) {
        if (e != undefined) {
          this.data3Form.deptId = e;
        } else {
          this.data3Form.deptId = "";
        }
        this.planCount3();
      },
      //实际计划分类完成度时间切换
      radioChange3(event) {
        this.data3Form.pDateStart = event[0];
        this.data3Form.pDateEnd = event[1];
        this.data3Form.timeType = event[2];
        this.planCount3();
      },
      //实际计划分类完成度
      planCount3() {
        PlanCount6(this.data3Form).then((res) => {
          this.data3 = res.data;
          for (let item of this.data3) {
            item.value = Number(item.value).toFixed(0);
          }
          // if (this.data3.dataList.length > 0) {
          //   let arr = [];
          //   for (let item of this.data3.dataList) {
          //     let obj = {};
          //     obj.name = item.name;
          //     obj.value = item.value1;
          //     arr.push(obj);
          //   }
          //   this.data3.dataList = arr;
          // }
          // console.log(res.data);
        });
      },
      //主要产成品产量时间切换
      radioChange4(event) {
        this.data4Form.pDateStart = event[0];
        this.data4Form.pDateEnd = event[1];
        this.planCount4();
      },
      //主要产成品产量选择器切换
      selectList4(e) {
        if (e != undefined) {
          this.data4Form.deptId = e;
        } else {
          this.data4Form.deptId = "";
        }
        this.planCount4();
      },
      //主要产成品产量-全部
      planCount4All() {
        let obj = JSON.parse(JSON.stringify(this.data4Form));
        obj.all = "111";
        PlanCount4(obj).then((res) => {
          if (res.code == 200) {
            this.$refs.AllDialog.unit = " 标准箱";
            for (let item of res.data) {
              item.name = item.name + " (计划量:" + item.value2 + ")";
              item.value = Number(item.value).toFixed(0);
              item.name = item.name + " (完成占比:" + (((Number(item.value) / Number(item.value2)) * 100).toFixed(2)) + "%)";
            }

            this.$refs.AllDialog.tableData.data = res.data;
            this.$refs.AllDialog.right.unit = "";
          }
          this.$refs.AllDialog.dialogTableVisible = true;
        });
      },
      //主要产成品产量
      planCount4() {
        PlanCount4(this.data4Form).then((res) => {
          this.data4 = res.data;
          for (let item of this.data4) {
            item.value = Number(item.value).toFixed(0);
            item.name = item.name + '(完成占比:' + (((Number(item.value) / Number(item.value2)) * 100).toFixed(2)) + '%)';
          }
        });
      },
      //近三十日产能趋势选择器切换
      selectList5(e) {
        if (e != undefined) {
          this.data5Form.deptId = e;
        } else {
          this.data5Form.deptId = "";
        }
        this.planCount5();
      },
      //近三十日产能趋势
      planCount5() {
        PlanCount5(this.data5Form).then((res) => {
          this.data5 = [];
          for (let item of res.data) {
            let obj = {};
            obj.name = item.day;
            obj.value1 = Number(item.count).toFixed(0);
            if (item.name != "") {
              obj.valueArr = item.name.split(",");
            } else {
              obj.valueArr = [];
            }
            this.data5.push(obj);
          }
        });
      },
    },
  };
</script>
<style lang="scss" scoped>
  .app-main {
    padding-bottom: 0;
  }

  .echarts_box[data-v-d80da0fe] {
    width: 25%;
  }

  .title_box_bc {
    box-shadow: 0 0 3px 3px rgb(52 112 167 / 90%);

    .calculagraph_right,
    .calculagraph_left {
      width: 39%;
      height: 100%;
      // background: red;
      display: flex;
      align-items: center;
      flex-direction: column;
      justify-content: center;
      position: relative;
      float: left;
      margin-left: 0%;
    }

    .calculagraph_right {
      align-items: flex-start;
      justify-content: center;
      width: 35%;
      height: 95%;
      margin-left: 0%;
    }
  }

  .seven_content {
    z-index: 10;
    width: 100%;
    height: calc(100% - 1px);

    overflow: auto;

    .content_box {
      width: 100%;
      // height: 100%;
      // overflow: auto;
      overflow-x: hidden;
      height: 100%;

      // overflow: hidden;
      .title_box {
        position: relative;

        .top {
          height: 35px;
          width: 100%;
          border-bottom: 1px solid #2a8cf04a;
          display: flex;
          padding: 0 15px;
          align-items: center;

          .border {
            width: 3px;
            height: 16px;
            background: #06ffff;
          }

          span {
            font-size: 16px;
            font-family: Adobe Heiti Std, Adobe Heiti Std-R;
            font-weight: R;
            text-align: left;
            margin-left: 10px;
            color: #ffffff;
          }
        }
      }
    }

    .content_box {
      .echartsBox {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        padding: 0.8% 0.8% 1%;
      }
    }

    .Echarts {
      height: calc(100% - 50px);
    }

    .PieGauge_box {
      height: 100%;
      display: flex;
      align-items: center;
    }

    .center2 {
      width: 40%;
    }

    .center_echarts {
      height: 180px;
    }
  }
  .ring {
    width: 128px!important;
    height: 128px!important;
  }
  .StrokeItem{
    width: 240px;
  }
  .StrokeItem3{
    width: 220px;
  }
  .StrokeItem3a{
    width: 280px;
  }
</style>